<template>
  <div class="carsList">
    <el-tabs type="border-card">
      <el-tab-pane label="待审核">
        <el-table
          :data="getToAuditCarsData.filter(data => !search || data.carBrand.toLowerCase().includes(search.toLowerCase())||data.carType.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%"
          height="330px"
        >
          <el-table-column label="商户名" prop="owner.name"></el-table-column>
          <el-table-column label="商品图片">
            <template slot-scope="scope">
              <img class="carsImage" :src="scope.row.imgs[0].headImagePath" />
            </template>
          </el-table-column>
          <el-table-column label="品牌" prop="carBrand"></el-table-column>
          <el-table-column label="型号" prop="carType"></el-table-column>
          <el-table-column label="车牌号" prop="carNumber"></el-table-column>
          <el-table-column label="联系电话" prop="phoneNumber"></el-table-column>
          <el-table-column label="审核状态" prop="carStatus"></el-table-column>
          <el-table-column align="right" width="150%">
            <template slot="header" slot-scope="scope">
              <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
            </template>
            <template slot-scope="scope">
              <el-button size="mini" @click="updateForRentCars(scope.row)">详情</el-button>
              <el-button size="mini" type="danger">编辑</el-button>
              <!-- <el-button type="text" size="small" >详情</el-button> -->
              <el-dialog
                title="详情"
                :visible.sync="dialogVisible"
                width="50%"
                :modal-append-to-body="true"
                :close-on-click-modal="true"
              >
                <el-row>
                  <el-col>
                    <el-card :data="updateRentCars">
                      <img
                        src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                        class="image"
                      />
                      <div style="padding: 14px;">
                        <ul>
                          <li>
                            <span>id：</span>
                            <span>{{updateRentCars._id}}</span>
                          </li>
                          <li>
                            <span>品牌：</span>
                            <span>{{updateRentCars.carBrand}}</span>
                          </li>
                          <li>
                            <span>型号：</span>
                            <span>{{updateRentCars.carType}}</span>
                          </li>
                          <li>
                            <span>车牌：</span>
                            <span>{{updateRentCars.carNumber}}</span>
                          </li>
                          <li>
                            <span>地址：</span>
                            <span>{{updateRentCars.address}}</span>
                          </li>
                          <li>
                            <span>价格：</span>
                            <span style="color:red">{{updateRentCars.rentPrice}}</span>
                          </li>
                          <li>
                            <span>状态：</span>
                            <span style="color:red">{{updateRentCars.carStatus}}</span>
                          </li>
                          <li>
                            <span>操作：</span>
                            <el-radio-group v-model="picked">
                              <el-radio-button value="审核通过" label="通过"></el-radio-button>
                              <el-radio-button value="不通过" label="不通过"></el-radio-button>
                            </el-radio-group>
                          </li>
                          <li>
                            <span slot="footer" class="dialog-footer">
                              <el-button @click="close">取 消</el-button>
                              <el-button
                                type="danger"
                                @click="updateForRentCarsAsync(updateRentCars._id)"
                              >确 定</el-button>
                            </span>
                          </li>
                        </ul>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            :current-page="pageData2.currentPage"
            :page-sizes="[3,4,5, 7]"
            :page-size="pageData2.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData2.total"
          ></el-pagination>
        </div>
      </el-tab-pane>

      <el-tab-pane label="待出租">
        <el-table
          :data="getForRentCarsData.filter(data => !search || data.carBrand.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%"
          height="330px"
        >
          <el-table-column label="商户名" prop="owner.name"></el-table-column>
          <el-table-column label="商品图片">
            <template slot-scope="scope">
              <img class="carsImage" :src="scope.row.imagePath" />
            </template>
          </el-table-column>
          <el-table-column label="品牌" prop="carBrand"></el-table-column>
          <el-table-column label="型号" prop="carType"></el-table-column>
          <el-table-column label="车牌号" prop="carNumber"></el-table-column>
          <el-table-column label="联系电话" prop="phoneNumber"></el-table-column>
          <el-table-column label="审核状态" prop="carStatus"></el-table-column>
          <el-table-column align="right" width="150%">
            <template slot="header" slot-scope="scope">
              <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
            </template>
            <template slot-scope="scope">
              <el-button size="mini">详情</el-button>
              <el-button size="mini" type="danger">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            :current-page="pageData.currentPage"
            :page-sizes="[3,4,5, 7]"
            :page-size="pageData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData.total"
          ></el-pagination>
        </div>
      </el-tab-pane>

      <el-tab-pane label="已出租">
        <el-table
          :data="getSoldOutCarsData.filter(data => !search || data.carBrand.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%"
          height="330px"
        >
          <el-table-column label="商户名" prop="owner.name"></el-table-column>
          <el-table-column label="商品图片">
            <template slot-scope="scope">
              <img class="carsImage" :src="scope.row.imagePath" />
            </template>
          </el-table-column>
          <el-table-column label="品牌" prop="carBrand"></el-table-column>
          <el-table-column label="型号" prop="carType"></el-table-column>
          <el-table-column label="车牌号" prop="carNumber"></el-table-column>
          <el-table-column label="联系电话" prop="phoneNumber"></el-table-column>
          <el-table-column label="审核状态" prop="carStatus"></el-table-column>
          <el-table-column align="right" width="150%">
            <template slot="header" slot-scope="scope">
              <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
            </template>
            <template slot-scope="scope">
              <el-button size="mini">详情</el-button>
              <el-button size="mini" type="danger">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange3"
            @current-change="handleCurrentChange3"
            :current-page="pageData3.currentPage"
            :page-sizes="[3,4,5, 7]"
            :page-size="pageData3.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData3.total"
          ></el-pagination>
        </div>
      </el-tab-pane>

      <el-tab-pane label="审核未通过">
        <el-table
          :data="getReFuseCarsData.filter(data => !search || data.carBrand.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%"
          height="330px"
        >
          <el-table-column label="商户名" prop="owner.name"></el-table-column>
          <el-table-column label="商品图片">
            <template slot-scope="scope">
              <img class="carsImage" :src="scope.row.imagePath" />
            </template>
          </el-table-column>
          <el-table-column label="品牌" prop="carBrand"></el-table-column>
          <el-table-column label="型号" prop="carType"></el-table-column>
          <el-table-column label="车牌号" prop="carNumber"></el-table-column>
          <el-table-column label="联系电话" prop="phoneNumber"></el-table-column>
          <el-table-column label="审核状态" prop="carStatus"></el-table-column>
          <el-table-column align="right" width="150%">
            <template slot="header" slot-scope="scope">
              <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
            </template>
            <template slot-scope="scope">
              <el-button size="mini">详情</el-button>
              <el-button size="mini" type="danger">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange4"
            @current-change="handleCurrentChange4"
            :current-page="pageData4.currentPage"
            :page-sizes="[3,4,5, 7]"
            :page-size="pageData4.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData4.total"
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers(
  "carslist"
);

export default {
  data() {
    return {
      // dialogVisible: false,
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        carBrand: ""
      },
      formLabelWidth: "120px",
      radio: "1",
      picked: "",
      search: ""
    };
  },

  watch: {
    picked(newValue, oldValue) {
      console.info(newValue);
      this.changeStatus(newValue);
    }
  },

  computed: {
    ...mapState([
      "getForRentCarsData",
      "pageData",
      "pageData2",
      "pageData3",
      "pageData4",
      "getToAuditCarsData",
      "getSoldOutCarsData",
      "updateRentCars",
      "dialogVisible",
      "getReFuseCarsData"
    ])
  },

  created() {
    this.getForRentCarsAsync(),
      this.getToAuditCarsAsync(),
      this.getSoldOutCarsAsync();
    this.getReFuseCarsAsync();
  },

  methods: {
    ...mapMutations(["updateForRentCars", "close", "changeStatus"]),

    ...mapActions([
      "getForRentCarsAsync",
      "getToAuditCarsAsync",
      "getSoldOutCarsAsync",
      "handleSizeChange1",
      "handleCurrentChange1",
      "handleSizeChange2",
      "handleCurrentChange2",
      "handleSizeChange3",
      "handleCurrentChange3",
      "handleSizeChange4",
      "handleCurrentChange4",
      "updateForRentCarsAsync",
      "updateSoldOutAsync",
      "getReFuseCarsAsync"
    ])
  }
};
</script>

<style scoped lang='less'>
@import "../assets/css/carlist";
.el-pagination {
  margin-top: 10px;
}
</style>